<script>
import bottomNav from "@/components/bottomNav.vue"
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { ref } from '@vue/reactivity';
export default {
    components:{
        bottomNav
    },
  setup() {
    let store = useStore()
    let router = useRouter()
    let setNum = ref("")
    let head = ref("")
    //获取头像信息
    let headlocal=JSON.parse(window.localStorage.getItem("headimg"))
    //如果有的话,换头像
    if(headlocal&&headlocal!=undefined){
      
      head.value=headlocal
    }
    setNum.value = store.state.phone
    if(setNum.value==null){
      setNum.value="登录/注册"
    }
    // 右边两个按钮的设置
    let gomessage = ()=>{
      router.push({
        path:"/minemessage"
      })
    }
    // 收藏
    let Collection = ()=>{
      router.push({
        path:"/collecView"
      })
    }

    let sgin = ()=>{
      router.push({
        path:"/login"
      })
    }

    let exit =()=>{
      //清除手机号
      store.commit("exit")
      window.sessionStorage.removeItem("data")
     
      setNum.value="登录/注册"
      
    }

   return{
    setNum,
    gomessage,
    sgin,
    exit,
    Collection,
    head
   }
  },
};
</script>

<template>
  <div class="container">
    <div class="top1">
      <!-- 右上角的两个小图标 -->
      <div class="settalk">
        <i></i>
        <i @click="gomessage"></i>
      </div>

      <!-- 下面头像那些 -->
      <div class="header">
        <div class="myhead">
          <img :src="head" alt="" v-show="setNum!='登录/注册'"/>
          <img src="../assets/img/ic_icon.head.png" alt="" v-show="setNum=='登录/注册'"/>
        </div>

        <div class="myname"  >
          <h6  v-if="setNum=='登录/注册'" @click="sgin">{{setNum}}</h6>
          <h6  v-if="setNum!='登录/注册'">{{setNum}}</h6>


          <h6 v-if="setNum=='登录/注册'">开启更多功能</h6>
        </div>

        <div class="gologin" @click="exit">
          <i></i>
        </div>
      </div>

      <!-- 选择框 -->
      <div class="choose">
        <router-link to="/myorder" class="myorder allhave">
          <img src="../assets/img/icon_order.png" alt="" />
          <h6>我的订单</h6>
        </router-link>
        <router-link to="/Down" class="outline allhave">
          <img src="../assets/img/icon_download_net_class.png" alt="" />
          <h6>离线中心</h6>
        </router-link>
        <div class="myliker allhave" @click="Collection">
          <img src="../assets/img/icon_collected.png" alt="" />
          <h6>我的收藏</h6>
        </div>
        <router-link to="addresslocal" class="mylocal allhave">
          <img src="../assets/img/icon_address.png" alt="" />
          <h6>收货地址</h6>
        </router-link>
      </div>

      <!-- 下面的 -->
      <div class="bottom">
        <!-- <div class="error all">
          <div class="left">
            <img src="../assets/img/icon_wrong.png" alt="" />
            <h6>我的错题本</h6>
          </div>

          <i></i>
        </div> -->
        <router-link to="/coupon" class="coupons all">
          <div class="left">
            <img src="../assets/img/icon_coupon.png" alt="" />
            <h6>我的优惠券</h6>
          </div>

          <i></i>
        </router-link>
        <div class="online all">
          <div class="left">
            <img src="../assets/img/icon_online.png" alt="" />
            <h6>在线咨询</h6>
          </div>

            <div class="time">

                <h6>周一至周日09:00-19:00</h6>
                <i></i>
            </div>
        </div>
        <div class="chat all">
          <div class="left">
            <img src="../assets/img/icon_service_mine.png" alt="" />
            <h6>客服热线</h6>
          </div>

          <div class="time">

                <h6>周一至周日09:00-19:00</h6>
                <i></i>
            </div>
        </div>
        <router-link to="/aboutour" class="about all">
          <div class="left">
            <img src="../assets/img/icon_about_us.png" alt="" />
            <h6>关于我们</h6>
          </div>

          <i></i>
        </router-link>
      </div>
    </div>


    

    <bottomNav></bottomNav>
  </div>
</template>

<style lang="scss">
@import url(../assets/css/base.css);
.container>.top1 {
//   height: 100vh;
  background: url(../assets/img/f7ff80ecffa068a7085fcf424817966.png) no-repeat;
  background-size: 100%;
  background-color: #f4f3f8;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  .settalk {
    display: flex;
    justify-content: end;
    margin-right: 14px;

    i:nth-child(1) {
      display: block;
      width: 33px;
      height: 33px;
      background-image: url(../assets/img/icon_msg_mine.png);
      background-size: 33px 33px;
      background-repeat: no-repeat;
      border-radius: 50%;
      margin-right: 14px;
    }
    i:nth-child(2) {
      display: block;
      width: 33px;
      height: 33px;
      background-image: url(../assets/img/icon_setting_mine.png);
      background-size: 33px 33px;
      background-repeat: no-repeat;
    }
  }

  .header {
    display: flex;
    padding: 0px 15px;
    margin-top: 16px;
    margin-left: 5px;
    .myhead {
      border-radius: 50%;
      overflow: hidden;
      width: 58px;
      height: 58px;
      margin-right: 14px;
      img:nth-child(1) {
        width: 100px;
      }
      img:nth-child(2) {
        width: 100%;
      }
    }

    .myname {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      h6:nth-child(1) {
        color: #f6fdfb;
        font-size: 20px;
        height: 38px;
        line-height: 38px;
      }
      h6:nth-child(2) {
        color: #acbdfc;
        font-size: 12px;
      }
    }

    .gologin {
      align-items: center;
      display: flex;
      margin-left: 16px;
      i {
        display: block;
        background-image: url(../assets/img/icon_login_mine.png);
        width: 20px;
        height: 20px;
        background-size: 20px 20px;
      }
    }
  }

  .choose {
    display: flex;
    background-color: #ffff;
    margin: 0px 15px;
    margin-top: 25px;
    border-radius: 15px;
    height: 80px;
    box-shadow: 0px 3px 4px 0px #e6e6e6;
    .allhave {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      img {
        width: 30px;
      }
      h6 {
        color: #191720;
        font-size: 12px;
        height: 25px;
        line-height: 25px;
        transform: scale(0.9);
      }
    }
  }

  .bottom {
    background-color: #ffff;
    display: flex;
    flex-direction: column;
    margin-top: 18px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0px -10px 8px 0px #ededed ;
    .all {
      display: flex;
      margin: 0px 15px;
      height: 57px;
      align-items: center;
      border-bottom: 1px solid #f2f2f2;
      >.time{
        display: flex;
        h6{
            color: #c8c8c8;
        }
      }
      .left {
        display: flex;
        flex: 1;
        img {
          width: 20px;
          margin-right: 17px;
        }
      }
      i {
        background-image: url(../assets/img/icon_word_right.png);
        background-size: 18px 18px;
        width: 18px;
        height: 18px;
        display: block;
      }
    }
  }
}
</style>